<template>
  <div class="info-content info-content-mail">
    <div class="info-content-mail-header">
      <div class="time">{{ replyTime }}</div>
      <div class="view-operate" v-if="heightMode != 1">
        <i class="iconfont icon-caret-down" v-show="heightMode == 2" @click="changeHeightMode(3)"></i>
        <i class="iconfont icon-caret-up" v-show="heightMode == 3" @click="changeHeightMode(2)"></i>
      </div>
      <div class="buttons" v-if="mode == 'chat'">
        <el-button class="buttons-item" type="text" @click="reply">{{ t('common.base.reply') }}</el-button>
      </div>
    </div>
    <div ref="mailMessageContent" class="mail-message-mail-content" :style="getStyle" @click="imgDomPreview">
      <div class="msgContainer" v-html="msg"></div>
      <div class="emailAttachmentList" v-if="emailAttachmentList.length > 0">
        <MailAttachmentListPreview :email-attachment-list="emailAttachmentList" />
      </div>
    </div>
    <div :class="['failInSend', failInSendStyle]" v-if="isSendError">
      <el-tooltip effect="dark" :content="t('im.imChat.components.mailChat.text9')" placement="top-start">
        <i class="iconfont icon-fdn-info"></i>
      </el-tooltip>
    </div>
  </div>
</template>
<script>
/** vue */
import { defineComponent, reactive, toRefs, computed, ref, onMounted, nextTick } from 'vue';
import EventBus from '@src/util/eventBus';
/** util */
import { formatDate } from 'pub-bbx-utils';
import { imgDomPreview } from '@src/modules/im/imChat/utils/tools.js';
import { t } from '@src/locales';
/** components */
import MailAttachmentListPreview from '@src/modules/im/components/MailAttachmentListPreview.vue';
export default defineComponent({
  name: 'MailMessage',
  components: {
    MailAttachmentListPreview,
  },
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
    mode: {
      type: String,
      default: '',
    },
  },
  setup(props) {
    const mailMessageContent = ref();

    const msg = computed(() => {
      return props.item?.messageContent?.customExts?.content ?? '';
    });

    const replyTime = computed(() => {
      return formatDate(props?.item.createTime);
    });

    const failInSendStyle = computed(() => {
      return props.item?.sendType == 1 ? 'rightMessage' : 'leftMessage';
    });

    const emailAttachmentList = computed(() => {
      return props.item?.messageContent?.customExts?.emailAttachmentList ?? [];
    });

    const isSendError = computed(() => {
      return props.item?.messageContent?.customExts?.sendSuccFlag;
    });

    const state = reactive({
      heightMode: 1, // 1:标准不压缩不展开  2:压缩 3:展开
      maxHeight: 100, // 当高度超过这个值，进行压缩或展开模式
    });

    const reply = () => {
      EventBus.$emit('replyEmail', props.item.id);
    };

    const changeHeightMode = val => {
      state.heightMode = val;
    };

    const getStyle = computed(() => {
      const { heightMode, maxHeight } = state;
      if (heightMode == 2) return { 'height': `${maxHeight}px`, 'overflow-y': 'hidden' };
      if (heightMode == 3) return { height: 'auto' };
      return {};
    });

    onMounted(() => {
      nextTick(() => {
        getImgLoadEd(watchMsgHeight);
      });
    });

    function watchMsgHeight() {
      const height = mailMessageContent.value.offsetHeight;
      if (height > state.maxHeight) {
        changeHeightMode(2);
      }
    }

    function getImgLoadEd(callback) {
      let images = document.querySelector('.msgContainer')?.querySelectorAll('img') ?? [];

      if (Array.from(images).length < 0) return callback();

      const promises = Array.from(images).map(node => {
        return new Promise((resolve, reject) => {
          let loadImg = new Image();
          loadImg.src = node.src;
          loadImg.onload = () => {
            resolve(node);
          };
        });
      });

      Promise.all(promises)
        .then(results => {
          callback();
        })
        .catch(e => {
          console.error('网络异常或其他程序异常', e);
        });
    }

    return {
      ...toRefs(state),
      replyTime,
      emailAttachmentList,
      msg,
      reply,
      formatDate,
      imgDomPreview,
      mailMessageContent,
      getStyle,
      changeHeightMode,
      failInSendStyle,
      isSendError,
      t,
    };
  },
});
</script>
<style lang="scss" scoped>
.info-content-mail {
  max-width: 100% !important;
  // white-space: pre-wrap;
  position: relative;
  overflow-x: auto;
  background-color: #f5f7fa !important ;
  border: 1px solid #e4e7ed !important;
  &-header {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    .view-operate {
      text-align: center;
      margin-left: 12px;
      .iconfont {
        cursor: pointer;
        font-size: 16px;
      }
    }
    .buttons {
      margin-left: auto;
      padding-left: 20px;
      &-item {
        color: #8c8c8c !important;
        font-size: 12px;
      }
    }
  }
  .emailAttachmentList {
  }
  .failInSend {
    position: absolute;
    top: 0px;
    color: rgb(255, 77, 79);
    &.rightMessage {
      left: -22px;
    }
    &.leftMessage {
      right: -22px;
    }
  }
}
</style>
<style lang="scss">
.mail-message-mail-content {
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  img:hover {
    cursor: pointer;
  }
  p {
    margin: 5px 0 !important;
  }
}
</style>
